<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进行easyui练习</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<link id="easyuiTheme" rel="stylesheet" type="text/css"
	href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../js/easyui/themes/icon.css">
<script src="../js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
<!-- 引入ztree -->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"
	charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />
<script type="text/javascript">
	function addTab() {
		$('#tt').tabs('add', {
			title : 'New Tab',
			content : 'Tab Body',
			closable : true
		});
	}
	// 菜单设置信息
	var setting = {
		data : {
			simpleData : {
				enable : true
			}
		},
		callback : {
			onClick : function zTreeOnClick(event, treeId, treeNode) {

				// 判断是否是父节点，如果是，就什么都不操作
				if (treeNode.isParent) {
					// alert("父节点");
					console.info(treeNode.name + "是父节点")
					return;
				}
				//alert(treeNode.tId + ", " + treeNode.name);
				// 点击时，看是否已经存在，存在就选中，否则就新增一个
				var exist = $('#tt').tabs('exists', treeNode.name);
				if (exist) {
					// 存在,选择
					var exist = $('#tt').tabs('select', treeNode.name);
				} else {
					// 新增
					$('#tt')
							.tabs(
									'add',
									{
										title : treeNode.name,
										content : "<iframe src='"
												+ treeNode.page
												+ "'style='width:100%;height:100%;border:0;'></iframe>",
										closable : true
									});
				}
			}
		}
	};
	// 数据
	var zNodes = [ {
		id : 1,
		pId : 0,
		name : "父节点一"
	}, {
		id : 2,
		pId : 0,
		name : "父节点二"
	}, {
		id : 11,
		pId : 1,
		name : "子节点一"
	}, {
		id : 12,
		pId : 1,
		name : "子节点二"
	}, {
		id : 13,
		pId : 2,
		name : "子节点三"
	}, {
		id : 14,
		pId : 2,
		name : "百度",
		page : "https://www.baidu.com/"
	} ];
	// 初始化菜单
	$(document).ready(function() {
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	});

	// 初始化右键菜单
	$(function() {
		// 设置全局变量 保存当前正在右键的tabs 标题 
		var currentRightTitle;
		$('#tt').tabs({
			onContextMenu : function(e, title, index) {
				currentRightTitle = title;
				// 阻止默认右键菜单显示
				e.preventDefault();
				// 显示自定义右键菜单
				$("#mm").menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			}
		});
		
		$('#mm').menu({ 
			onClick:function(item){ 
				if(item.name==='Close'){
					$('#tt').tabs('close',currentRightTitle);
				}else if(item.name === 'CloseOthers'){
					var tabs = $('#tt').tabs('tbs');
					$(tabs).each(function(){
						if($(this).panel('options').title != '消息中心' && $(this).panel('options').title != currentRightTitle){
							$('#tt').tabs('close',$(this).panel('options').title);
						}
					});
				}else if(item.name === 'CloseAll'){
					var tabs = $('#tt').tabs('tabs');
					$(tabs).each(function(){
						if($(this).panel('options').title != '消息中心'){
							$('#tt').tabs('close',$(this).panel('options').title);
						}
					});
				}
			} 
		}); 
	});
</script>


</head>
<body class="easyui-layout">

	<div data-options="region:'north',title:'公司logo',split:false"
		style="height: 100px;"></div>

	<div data-options="region:'south',title:'公司信息',split:false"
		style="height: 100px;"></div>

	<div data-options="region:'west',title:'菜单',split:false"
		style="width: 200px;">

		<div id="aa" class="easyui-accordion"
			style="width: 300px; height: 200px;" data-options="fit:true">
			<div title="基本功能" data-options="iconCls:'icon-mini-add'"
				style="overflow: auto; padding: 10px;">
				<!-- 树形菜单 -->
				<ul id="treeDemo" class="ztree"></ul>
			</div>
			<div title="系统管理"
				data-options="iconCls:'icon-mini-add',selected:false"
				style="padding: 10px;">
				<input type="button" value="添加选项卡" onclick="addTab()">
			</div>
		</div>

	</div>

	<div data-options="region:'center'"
		style="padding: 5px; background: #eee;">

		<div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;"
			data-options="fit:true">

			<div title="Tab1" style="padding: 20px; display: none;"></div>

		</div>


		<div title="Tab2" data-options="closable:true"
			style="overflow: auto; padding: 20px; display: none;">tab2</div>
		<div title="Tab3" data-options="iconCls:'icon-reload',closable:true"
			style="padding: 20px; display: none;">tab3</div>
	</div>

	<!-- 定义的菜单 -->
	<div id="mm" class="easyui-menu" style="width:120px;">
			<div data-options="name:'Close'">关闭当前窗口</div>
			<div data-options="name:'CloseOthers'">关闭其它窗口</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-cancel',name:'CloseAll'">关闭全部窗口</div>
	</div>


</body>


</html>
